<template>
  <div>
    <h-form-group :title="$t('Font Family')">
      <list-input :value="value.value.face" :metadata="familyMetadata" @input="setFamily">
        <template slot="item" slot-scope="{ option }">
          <span :style="familyOptionStyle(option.value)">{{ option.title }}</span>
        </template>
      </list-input>
    </h-form-group>
    <h-form-group :title="$t('Font Style')">
      <list-input :value="value.value.style" :metadata="styleMetadata" @input="setStyle">
        <template slot="item" slot-scope="{ option }">
          <span :style="styleOptionStyle(option.value)">{{ option.title }}</span>
        </template>
      </list-input>
    </h-form-group>
    <font-size-selector :value="value.value.size" @input="setSize" />
  </div>
</template>

<script lang="ts" src="./ObsSystemFontSelector.vue.ts"></script>

<style lang="less" scoped>
@import '../../../styles/index';

.multiselect--font {
  margin-bottom: 0;
}

.FontProperty-presets {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  border: 0;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  outline: none;
}
</style>
